import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:graphic/graphic.dart';
import 'package:top_foundation/utils/util.dart';
import 'package:whale/helper/utils/img_util.dart';

import '../../../../helper/utils/color.dart';
import '../../../../helper/utils/httputils/net_api.dart';
import '../../model/trend_point.dart';
import '../controller.dart';

class HorizontalChart extends StatefulWidget {
  HorizontalChart({this.reportType});
  String? reportType;

  @override
  State<HorizontalChart> createState() => _HorizontalChartState();
}

class _HorizontalChartState extends State<HorizontalChart> {
  final state = Get.find<WatchController>().state;

  /// A color palette of 10 colors.
  List<Color> get myColors => [
        const Color(0xFF007EFF),
        const Color(0xFF3ABC93),
        const Color(0xFFD2B38E),
        const Color(0xfff6bd16),
        const Color(0xff6f5ef9),
        const Color(0xff6dc8ec),
        const Color(0xff945fb9),
        const Color(0xffff9845),
        const Color(0xff1e9493),
        const Color(0xffff99c3),
      ];

  @override
  void initState() {
    super.initState();
    getTrendData('全部');
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: RotatedBox(
      quarterTurns: 3,
      child: Container(
        width: 1.sh,
        height: 1.sw,
        color: Colors.white,
        padding: EdgeInsets.only(top: 15.r),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              margin: EdgeInsets.only(left: 15.r),
              child: Text(
                '趋势分析',
                style: TextStyle(
                    color: ColorsUtil.title,
                    fontSize: 16.sp,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Expanded(
                child: Container(
              margin: EdgeInsets.only(top: 10.r, bottom: 10.r),
              width: 1.sh,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10.r),
              ),
              padding: EdgeInsets.only(bottom: 10.r),
              child: Column(
                children: [
                  Container(
                    padding: EdgeInsets.all(12.r),
                    child: Row(
                      children: [
                        Container(
                          width: 12.r,
                          height: 12.r,
                          margin: EdgeInsets.only(right: 5.r),
                          decoration: BoxDecoration(
                              color: const Color(0xffBDDEFE),
                              border: Border.all(
                                  color: Color(0xff017EFF), width: 0.5)),
                        ),
                        Text(
                          '文件数',
                          style: TextStyle(
                            color: ColorsUtil.title,
                            fontSize: 12.sp,
                          ),
                        ),
                        Container(
                          width: 12.r,
                          height: 12.r,
                          margin: EdgeInsets.only(left: 10.r, right: 5.r),
                          decoration: BoxDecoration(
                              color: const Color(0xffD2E9DB),
                              border: Border.all(
                                  color: Color(0xff3ABC93), width: 0.5)),
                        ),
                        Text(
                          '疑似违规数',
                          style: TextStyle(
                            color: ColorsUtil.title,
                            fontSize: 12.sp,
                          ),
                        ),
                        Container(
                          width: 12.r,
                          height: 12.r,
                          margin: EdgeInsets.only(left: 10.r, right: 5.r),
                          decoration: BoxDecoration(
                              color: const Color(0xffE5E2D5),
                              border: Border.all(
                                  color: Color(0xffD2B38E), width: 0.5)),
                        ),
                        Text(
                          '疑似高风险违规数',
                          style: TextStyle(
                            color: ColorsUtil.title,
                            fontSize: 12.sp,
                          ),
                        ),
                        Spacer(),
                        GestureDetector(
                          onTap: () => Get.back(),
                          child: Row(
                            children: [
                              Image.asset(
                                'icon_full.png'.imgPathWatch,
                                width: 12.r,
                                height: 12.r,
                                fit: BoxFit.fill,
                              ),
                              SizedBox(
                                width: 5.r,
                              ),
                              Text(
                                '关闭',
                                style: TextStyle(
                                    color: ColorsUtil.subTitle, fontSize: 12.r),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    height: 250.r,
                    child: trendGroupData.isEmpty
                        ? const SizedBox()
                        : Chart(
                            data: trendGroupData,
                            variables: {
                              'date': Variable(
                                accessor: (Map map) => map['date'] as String,
                                scale:
                                    OrdinalScale(tickCount: 5, inflate: true),
                              ),
                              'points': Variable(
                                accessor: (Map map) => map['points'] as num,
                              ),
                              'name': Variable(
                                accessor: (Map map) => map['name'] as String,
                              ),
                            },
                            coord: RectCoord(horizontalRange: [0.01, 0.99]),
                            marks: [
                              LineMark(
                                position: Varset('date') *
                                    Varset('points') /
                                    Varset('name'),
                                shape: ShapeEncode(
                                    value: BasicLineShape(smooth: true)),
                                size: SizeEncode(value: 0.5),
                                color: ColorEncode(
                                  variable: 'name',
                                  values: myColors,
                                  updaters: {
                                    'groupMouse': {false: (color) => color},
                                    'groupTouch': {false: (color) => color},
                                  },
                                ),
                              ),
                              PointMark(
                                color: ColorEncode(
                                  variable: 'name',
                                  values: myColors,
                                  updaters: {
                                    'groupMouse': {false: (color) => color},
                                    'groupTouch': {false: (color) => color},
                                  },
                                ),
                              ),
                            ],
                            axes: [
                              Defaults.horizontalAxis,
                              Defaults.verticalAxis,
                            ],
                            selections: {
                              'tooltipMouse': PointSelection(on: {
                                GestureType.hover,
                              }, devices: {
                                PointerDeviceKind.mouse
                              }),
                              'groupMouse': PointSelection(
                                  on: {
                                    GestureType.hover,
                                  },
                                  variable: 'name',
                                  devices: {PointerDeviceKind.mouse}),
                              'tooltipTouch': PointSelection(on: {
                                GestureType.scaleUpdate,
                                GestureType.tapDown,
                                GestureType.longPressMoveUpdate
                              }, devices: {
                                PointerDeviceKind.touch
                              }),
                              'groupTouch': PointSelection(
                                  on: {
                                    GestureType.scaleUpdate,
                                    GestureType.tapDown,
                                    GestureType.longPressMoveUpdate
                                  },
                                  variable: 'name',
                                  devices: {PointerDeviceKind.touch}),
                            },
                            tooltip: TooltipGuide(
                              selections: {'tooltipTouch', 'tooltipMouse'},
                              followPointer: [true, true],
                              align: Alignment.topLeft,
                              mark: 0,
                              variables: [
                                'date',
                                'name',
                                'points',
                              ],
                            ),
                            crosshair: CrosshairGuide(
                              selections: {'tooltipTouch', 'tooltipMouse'},
                              styles: [
                                PaintStyle(
                                    strokeColor: const Color(0xffbfbfbf)),
                                PaintStyle(
                                    strokeColor: const Color(0x00bfbfbf)),
                              ],
                              followPointer: [true, false],
                            ),
                          ),
                  ),
                ],
              ),
            ))
          ],
        ),
      ),
    ));
  }

  List<Map<dynamic, dynamic>> trendGroupData = [];
  getTrendData(String reportType) async {
    var res = await WatchApi.trendData30(reportType);
    if (res.isSuccess) {
      List list = res.data;
      List<TrendPoint> trendpoints =
          list.map((e) => TrendPoint.fromJson(e)).toList();

      setState(() {
        for (var element in trendpoints) {
          trendGroupData.add({
            'date': element.dateStr ?? '',
            'name': '文件数',
            'points': element.docSum ?? 0
          });
          trendGroupData.add({
            'date': element.dateStr,
            'name': '疑似违规数',
            'points': element.illDocSum
          });
          trendGroupData.add({
            'date': element.dateStr,
            'name': '疑似高风险违规数',
            'points': element.illHighDocSum
          });
        }
      });
    }
  }
}
